今天，應該是會完成整個查詢功能了，只剩後台管理的部分，再串接一下內容腳本就好囉

原本整理出來的資料格式

store/train.json

{
  "train-list": [
    {
      "id": "0900",
      "name": "基隆"
    },
    {
      "id": "0930",
      "name": "七堵"
    },
    {
      "id": "0980",
      "name": "南港"
    },
    {
      "id": "0990",
      "name": "松山"
    },
    {
      "id": "1000",
      "name": "臺北"
    },
    {
      "id": "1010",
      "name": "萬華"
    }...
  ]
}

因為這次的資料是唯讀的，也不是什麼需要管理的資料，所以我直接使用fetch與json檔案就好了

baground/bg.js

class TrainManager {

    constructor() {
        this.trainList = []
        this.action = null // time or station or trainno
        this.actionData = {} // content script data
        this.fetchTraniList()
    }
    
    //從json取得車站清單
    fetchTraniList() {
        fetch('./store/train.json')
            .then(res => {
                return res.json()
            })
            .then(data => {
                this.trainList = data['train-list']
            })
    }
}

//用var而非const是因為要讓浮動頁面可以直接chrome.runtime.getBackground存取
var trainManager = new TrainManager()

然後把昨天呼叫後台的三支函數都完成

background/bg.js

searchByTime(params) {
    //將參數存入變數
    this.action = 'time'
    this.actionData = {
        startStation: params.startStation, //開始時間
        endStation: params.endStation, //結束時間
        rideDate: params.rideDate, //查詢日期
        timeType: params.timeType, //時間類型
        startTime: params.startTime, //開始時間
        endTime: params.endTime, //結束時間
        trainNo: params.trainNo, //列車編號
        isTransfer: params.isTransfer, //接受轉乘
        checkType: params.checkType //對號
    }
    //開啟新頁面
    chrome.tabs.create(
        {
        url:'https://tip.railway.gov.tw/tra-tip-web/tip/tip001/tip112/gobytime'
    })
}

searchByStation(params) {
    //將參數存入變數
    this.action = 'station'
    this.actionData = {
        rideDate: params.rideDate,
        singleStation: params.singleStation
    }
    //開啟新頁面
    chrome.tabs.create({
        url:'https://tip.railway.gov.tw/tra-tip-web/tip/tip001/tip112/gobystation'
    })
}

searchByTrainNo(params) {
    //將參數存入變數
    this.action = 'trainno'
    this.actionData = {
        rideDate: params.rideDate,
        trainNo: params.trainNo
    }
    //開啟新頁面
    chrome.tabs.create({
        url:'https://tip.railway.gov.tw/tra-tip-web/tip/tip001/tip112/gobytrainno'
    })
}

接下來就是要到內容腳本，讓開啟的頁面可以取得送入後台的資料
因為目前只有一隻函式使用，而且資料格式已經在後台都轉好了，所以三個sendMessage都呼叫同樣函式即可

content_script/serachTrain.js

switch (location.pathname) {
    case '/tra-tip-web/tip/tip001/tip112/gobytime':
        chrome.runtime.sendMessage({ func: 'getSearch' }, runTrainByTime)
        break
    case '/tra-tip-web/tip/tip001/tip112/gobystation':
        chrome.runtime.sendMessage({ func: 'getSearch' }, runTrainByStation)
        break
    case '/tra-tip-web/tip/tip001/tip112/gobytrainno':
        chrome.runtime.sendMessage({ func: 'getSearch' }, runTrainByTrainno)
}

然後後台腳本的接收端這樣處理，一樣因為只有一個函式所以沒有解析request，
而且因為chrome.runtime.onMessage.addListener的作用域在class之外，所以必須使用變數才能取得actionData

class TrainManager {
    constructor() {
    ...
    ...
    chrome.runtime.onMessage.addListener(this.msgListener)
    ...
    ...
    }
    
    msgListener(request, sender, sendResponse){
        sendResponse(trainManager.actionData)
    }
}

var trainManager = new TrainManager

接下來再回到內容腳本接收資料並且丟到dom裡面，用一個舉例就好了

function runTrainByTime(res) {
    //起站
    document.getElementById('startStation').value = res.startStation
    //迄站
    document.getElementById('endStation').value = res.endStation
    //轉乘條件 點選 => 接受轉乘
    if (res.isTransfer)
        document.querySelector('.zone.form-horizontal #option2').click()
    else 
        document.querySelector('.zone.form-horizontal #option1').click()

    //日期
    document.getElementById('rideDate').value = res.rideDate.replace(/-/g,'/')
    //開始時間
    document.getElementById('startTime').value = '06:00'
    //結束時間
    document.getElementById('endTime').value = '23:00'
    //查詢出發時間/抵達時間
    if(res.timeType === 'departure')
        document.getElementById('startOrEndTime1').click()
    else
        document.getElementById('startOrEndTime2').click()
    // 車種
    if(res.checkType === 'all'){
        document.getElementById('trainTypeList1').click()
    }else if(res.checkType === 'checkmark'){
        document.getElementById('trainTypeList2').click()
    }else{
        document.getElementById('trainTypeList3').click()
    }
    //送出
    document.querySelector('input[type="submit"]').click()
}

就完成囉！接下來只要打開視窗，然後...

登登，然後就完成查詢囉！

那我們明天再繼續八！